<template>
	<div class="my-todolist-container">
		<div class="my-todolist-container-t">
			<div class="my-todolist-container-t-l">
				<span class="border"></span>
				<span class="text"
					>我的待办<span>({{ toDoCount }})</span></span
				>
			</div>
			<div class="my-todolist-container-t-r" @click="MyDbList">更多<van-icon name="arrow-double-right" /></div>
		</div>

		<van-pull-refresh v-model="refreshing" class="content" @refresh="onRefresh" ref="refreshBox">
			<van-list :immediate-check="false" v-model="loading" :finished="finished" :finished-text="list.length == 0 ? '' : '没有更多了'" @load="onLoad">
				<ListCard v-for="item in list" :datas="item" :key="item.id" @click="toDetail(item)" :bizTaskName="true">
					<template #time>
						<div class="time">
							<div>派发时间：{{ item.orderTime }}</div>
							<van-button type="primary" size="mini" @click.stop="handleTransact(item)">办理</van-button>
						</div>
					</template>
				</ListCard>
				<van-empty description="暂无内容" v-if="list.length == 0 && !loading" />
			</van-list>
			<van-loading size="16px" style="margin-top: 10px; text-align: center" v-if="loading && !refreshing">加载中...</van-loading>
			<van-back-top offset="400" style="margin-bottom: 30px" />
		</van-pull-refresh>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { fetchList } from '/@/api/myTodo/index';
import ListCard from '/@/components/list-card/index.vue';
const router = useRouter();
const MyDbList = () => {
	router.push('/mytodo');
};
const handleTransact = (item: any) => {
	router.push({
		path: '/handle',
		query: {
			eventNum: item.eventNum,
			id: item.id,
			taskCode: item.bizTaskCode,
			eventProcessId: item.eventProcessId,
		},
	});
};
const refreshBox = ref();
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
const list = ref<any[]>([]);
const params = ref({
	current: 0,
	size: 10,
});

const toDetail = (row: any) => {
	router.push({
		path: '/detail',
		query: {
			eventNum: row.eventNum,
			id: row.id,
		},
	});
};
const onRefresh = () => {
	params.value.current = 0;
	refreshing.value = true;
	finished.value = false;
	list.value = []; // 清空列表数据
	toDoCount.value = 0;
	onLoad(); // 重新获取数据
};
const onLoad = () => {
	if (!loading.value) {
		loading.value = true;
		params.value.current += 1;

		fetchList(params.value)
			.then((res: any) => {
				if (res.ok) {
					list.value = list.value.concat(res.data.records);
					finished.value = res.data.current >= res.data.pages;
					toDoCount.value = res.data.total || 0;
				}
			})
			.finally(() => {
				refreshing.value = false;
				loading.value = false;
			});
	} else {
		return false;
	}
};
const toDoCount = ref(0);
onMounted(() => {
	onLoad();
});
</script>
<style lang="scss" scoped>
.my-todolist-container {
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 100%;
	margin-top: 5px;
	overflow-y: hidden;
	background-color: #fff;

	.van-button {
		width: 60px;
	}

	.time {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.my-todolist-container-t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15px;
		border-bottom: 1px solid #f5f5f5;

		.my-todolist-container-t-l {
			display: flex;

			.border {
				display: inline-block;
				width: 6px;
				height: 20px;
				margin-right: 10px;
				text-align: center;
				background: linear-gradient(180deg, var(--el-color-primary) 0%, #409eff 100%);
				border-radius: 20px;
			}

			.text {
				font-size: 16px;
				font-weight: 700;
				color: #000;
			}
		}

		.my-todolist-container-t-r {
			font-size: 12px;
			color: #1989fa;
			cursor: pointer;
		}
	}

	.content {
		flex: 1;
		width: 100%;
		padding: 10px;
		overflow-y: auto;

		:deep(.van-list__finished-text) {
			padding-bottom: 10px;
		}
	}
}
</style>
